<template>
	<div>
		
		<div style="width: 88px;height: 88px;border-radius: 88px;margin: auto;margin-top: 50px;">
			<img style="width: 88px;height: 88px;border-radius: 88px;margin: auto;" src="../assets/images/login.jpg" />
		</div>
		<div class="width90 borderBottom" style="margin: 30px auto;"></div>
		<div class="width90">
			<div class="text-16 blod">宝库系统申请获取以下权限：</div>
			<div style="color: #B6B6B6;padding-top: 10px;padding-bottom: 40px;" class="text-16 blod">获得你的公开信息（昵称、头像等）</div>
			
			
			<van-form @submit="login">
				<div class="loginForm">
					<van-field clearable v-model="username" name="phone" placeholder="请填写手机号" 
						:rules="[{ pattern, message: '请填写手机号' }]" />
					<van-field clearable v-model="password" type="password" name="passWord" placeholder="请填写密码" 
						:rules="[{ required: true, message: '请填写密码' }]" />
				</div>
			
				<div style="width: 90vw;margin: auto;margin-top: 40px;">
					<van-button native-type="submit" style="width: 90vw;" :color="colorBtn" type="primary" round>授权登录</van-button>
				</div>
			</van-form>
			
			<!-- <div style="padding-top: 20px;">
				<van-checkbox v-model="checkAgreement" icon-size="14px">
					<span class="text-14">勾选协议协议协议协议</span>
				</van-checkbox>
			</div> -->
		</div>
		<van-popup v-model="showMemberId" round >
			<div style="width: 70vw;height: 50vw;display: flex;flex-direction: column;align-items: center;">
				<van-field v-model="code" label="id" placeholder="请输入id" />
				<van-button style="width: 30vw;" @click="login" :color="colorBtn" type="primary" round>登录</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import BaseView from "@/views/BaseView.vue"
	import { Toast } from 'vant';
	export default {
		extends: BaseView,
		data() {
			return {
				backcolor: "#FFFFFF",
				pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
				checkAgreement:false,
				showMemberId:false,
				memberId:"",
				username:"",
				password:"",
				// memberId:"10000001"
				code:""
			}
		},
		created() {
			// this.code=this.getUrlParam("code")
			// console.log("code",this.code)
			// let redirect_uri = encodeURIComponent(window.location.href)
			// window.location.href =
			// 	"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxcf04a216c8e6cfe3&redirect_uri=" + redirect_uri +
			// 	"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
		},
		methods: {
			clickShow(){
				this.showMemberId=true
			},
			login(value){
				// value.code=this.code
				console.log("value",value)
				this.$axios.post("member/base/officialCodeLogin",value).then(res=>{
					console.log("登录",res)
					if(res.code==1){
						localStorage.setItem('userInfo',JSON.stringify(res.data));
						setTimeout(()=>{
							this.$router.go(-1)
						},500)
						
					}else{
						Toast(res.msg)
					}
				})
				
				
				//模拟登录
				// this.$axios.get("member/base/testToken",{
				// 	params:{memberId:this.memberId}
					
				// }).then(res=>{
				// 	console.log("登录",res)
				// 	if(res.code==1){
				// 		localStorage.setItem('token',res.data);
				// 		this.$router.go(-1)
				// 	}else{
				// 		Toast(res.msg)
				// 	}
				// })
			}
		}
	}
</script>

<style>
	.loginForm {
		width: 90vw;
		background: #FFFFFF;
		border-radius: 10px;
		margin: auto;
		margin-top: 15px;
	}
	.loginForm .van-cell{
		margin-bottom: 20px;
		border-radius: 45px;
		background: rgba(72,226,103,0.1) !important;
		padding: 5px 4vw;
	}
</style>
